<!--
 * @Author: Seon.Hu SeonHu@126.com
 * @Date: 2024-04-14 17:28:11
 * @LastEditors: Seon.Hu SeonHu@126.com
 * @LastEditTime: 2024-04-14 18:05:10
 * @FilePath: \bg-vben\src\views\mobile\app\tree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="overflow-hidden bg-white">
    <BasicTree
      :title="t('mobile.route.app.title')"
      toolbar
      search
      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
      :clickRowToExpand="false"
      :defaultExpandAll="true"
      :treeData="treeData"
      v-if="treeData.length"
      :fieldNames="{ key: 'Id', title: 'Name', children: 'Items' }"
      @select="handleSelect"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';

  import { useI18n } from '@/hooks/web/useI18n';

  import { BasicTree, TreeItem } from '@/components/Tree';
  import { getApps } from '@/api/mobile';

  defineOptions({ name: 'MobAppTree' });
  const emit = defineEmits(['select']);

  const { t } = useI18n();

  const treeData = ref<TreeItem[]>([]);

  async function fetch() {
    treeData.value = [];

    //获取组数据
    const groupData = (await getApps()) as unknown as TreeItem[];
    //增加未分组栏
    // treeData.value.push({ key: '0', Id: '0', Name: t('iot.route.device.group.ungroupedText') });
    //增加组数据
    treeData.value = [...treeData.value, ...groupData];
  }

  function handleSelect(selectedKeys: any, e: any) {
    //console.log('select', { selectedKeys, e, treeData: treeData.value });
    const selectedKey = selectedKeys[0];
    const data = treeData.value.filter((item) => item.Id === selectedKey)[0];
    emit('select', selectedKey, e, data);
  }

  onMounted(() => {
    fetch();
  });
</script>
